<template>
	<div>
		<a-radio-group v-model:value="radioValue" class="radio-wrap mb-[20px]">
			<a-radio-button value="2">线索资料</a-radio-button>
			<a-radio-button value="1">线索动态</a-radio-button>
			<a-radio-button value="3">联系人</a-radio-button>
		</a-radio-group>
		<!-- 客户动态展示 -->
		<template v-if="radioValue === '1'">
			<a-tabs v-model:activeKey="activeTab" @change="getRecords()" class="tab-wrap">
				<a-tab-pane key="" tab="全部"> </a-tab-pane>
				<a-tab-pane key="0" tab="跟进记录"></a-tab-pane>
				<a-tab-pane key="1" tab="通话记录"></a-tab-pane>
				<a-tab-pane key="2" tab="操作记录"></a-tab-pane>
			</a-tabs>
			<div class="scoll-view scrollbar-thumb" @scroll="onBottom">
				<a-timeline>
					<a-timeline-item v-for="(item, index) in recordList" :key="index">
						<div class="mt-2">
							<span style="font-size: 16px; font-weight: 500; color: #666666">{{ item.createAt }}</span>
							<div
								class="mt-2 border border-solid border-[var(--border-color-base)]"
								style="padding: 15px 30px; background: #f7f7f7; border: none"
							>
								<div class="flex justify-between">
									<div v-if="item.type === 2">{{ item.title }}</div>
									<div v-else>
										<a-space v-if="item.type === 0">
											<span style="margin-right: 20px">跟进记录</span>
											<a-tag>{{ followTypeEnum[item.followType] }}</a-tag>
											<a-tag v-if="item.customerLevelName">{{ item.customerLevelName }}类线索</a-tag>
										</a-space>
										<a-space v-if="item.type === 1">
											<span>通话记录</span>
											<a-tag>{{ item.recordFlag === '1' ? '已接通' : '未接通' }}</a-tag>
											<a-tag v-if="item.callType">{{ ['呼出', '呼入'][parseInt(item.callType)] }}</a-tag>
										</a-space>
									</div>
									<div class="flex">
										<a-tag v-if="item.type === 1 && item.communicationType !== null" class="mr-[12px]">{{
											['线路外呼', '4G多卡话机'][item.communicationType]
										}}</a-tag>
										<div>{{ item.createAt }}</div>
									</div>
								</div>
								<div v-if="item.type === 0" class="min-h-[100px] text-gray-500 pt-4">
									{{ item.content }}
								</div>
								<div v-if="item.type === 1" class="h-[100px] text-gray-500">
									<div>联系号码：{{ item.contactPhone || '-' }}</div>
									<div v-if="item.type === 1 && item.recordUrl && item.recordFlag === '1'" class="mt-[10px]">
										<audio controls ref="audio" class="aud">
											<source :src="item.recordUrl" />
										</audio>
									</div>
								</div>
								<div v-if="item.type === 2" class="h-[100px]">
									<div v-if="item.title === '回收公海'" class="min-h-[100px] text-gray-500 pt-4">
										{{ item.content }}
									</div>
									<div v-else-if="item.title === '转让线索'" class="text-gray-500 w-[80%] mt-4">
										<a-row>
											<a-col :span="12">
												<span>线索名称：</span>
												<span>{{ item.content || '-' }}</span>
											</a-col>
											<a-col :span="12">
												<span>转让人：</span>
												<span>{{ item.transName || '-' }}</span>
											</a-col>
											<a-col :span="12">
												<span>接收人：</span>
												<span>{{ item.actionName || '-' }}</span>
											</a-col>
										</a-row>
									</div>
									<div v-else class="text-gray-500 w-[80%] mt-4">
										<a-row>
											<a-col :span="12">
												<span>线索名称：</span>
												<span>{{ item.customerName || '-' }}</span>
											</a-col>
											<a-col :span="12">
												<span>职位：</span>
												<span>{{ item.post || '-' }}</span>
											</a-col>
											<a-col :span="12">
												<span>线索等级：</span>
												<span>{{ item.customerLevelName || '-' }}</span>
											</a-col>
											<a-col :span="12">
												<span>手机：</span>
												<span>{{ item.contactPhone || '-' }}</span>
											</a-col>
											<a-col :span="12">
												<span>联系人：</span>
												<span>{{ item.contactPerson || '-' }}</span>
											</a-col>
										</a-row>
									</div>
								</div>
								<div class="flex justify-end">
									<a-space :size="20">
										<div
											v-if="item.type === 0"
											style="margin-right: 80px; font-size: 15px; font-weight: 500; color: #666666"
										>
											关联联系人：{{ item.actionName }}
										</div>
										<div style="font-size: 15px; font-weight: 500; color: #666666">
											操作人：{{ item.createUserName }}
										</div>
									</a-space>
								</div>
							</div>
						</div>
					</a-timeline-item>
				</a-timeline>
				<div v-show="!loading">
					<a-empty v-if="recordList.length === 0" />
					<div v-else>
						<div v-if="recordList.length >= total" class="text-center text-gray-500">没有更多了</div>
						<div v-else ref="loadmore" class="text-center text-gray-500">下拉加载更多</div>
					</div>
				</div>
				<div v-show="loading" class="text-center text-gray-500">正在加载</div>
			</div>
		</template>
		<!-- 客户资料展示 -->
		<template v-if="radioValue === '2'">
			<div class="text-base border-0 border-l-4 border-solid border-[#108ee9] pl-2 my-6">基本信息</div>
			<a-form :label-col="{ style: { width: '100px' } }" class="form_label">
				<a-row>
					<a-col :span="12">
						<a-form-item label="线索名称">{{ props.info.customerName || '-' }}</a-form-item>
					</a-col>
					<a-col :span="12">
						<a-form-item label="线索来源">{{ props.info.customerFrom || '-' }}</a-form-item>
					</a-col>
					<a-col :span="12">
						<a-form-item label="线索等级">{{
							props.info.customerLevelName ? props.info.customerLevelName + '类线索' : '-'
						}}</a-form-item>
					</a-col>
					<a-col :span="12">
						<a-form-item label="所属行业">{{ props.info.industry || '-' }}</a-form-item>
					</a-col>
					<a-col :span="12">
						<a-form-item label="所属地区">{{ props.info.district || '-' }}</a-form-item>
					</a-col>
					<a-col :span="12">
						<a-form-item label="线索地址">{{ props.info.customerAddress || '-' }}</a-form-item>
					</a-col>
					<a-col :span="12">
						<a-form-item label="备注">{{ props.info.remark || '-' }}</a-form-item>
					</a-col>
					<a-col :span="12">
						<a-form-item label="注册日期">{{ props.info.regTime || '-' }}</a-form-item>
					</a-col>
				</a-row>
			</a-form>
			<div class="text-base border-0 border-l-4 border-solid border-[#108ee9] pl-2 my-6">系统信息</div>
			<a-form :label-col="{ style: { width: '100px' } }" class="form_label">
				<a-row>
					<a-col :span="12">
						<a-form-item label="创建人">{{ props.info.createUserName || '-' }}</a-form-item>
					</a-col>
					<a-col :span="12">
						<a-form-item label="创建线索时间">{{ props.info.createAt || '-' }}</a-form-item>
					</a-col>
					<a-col :span="12">
						<a-form-item label="领取/分配时间">{{ props.info.receiveTime || '-' }}</a-form-item>
					</a-col>
					<a-col :span="12">
						<a-form-item label="线索编号">{{ props.info.customerCode || '-' }}</a-form-item>
					</a-col>
					<a-col :span="12">
						<a-form-item label="录入方式">{{ customerRecordEnum[props.info.receiveWay] || '-' }}</a-form-item>
					</a-col>
					<a-col :span="12">
						<a-form-item label="掉保时间">{{ props.info.dropTime || '-' }}</a-form-item>
					</a-col>
					<a-col :span="12">
						<a-form-item label="最近修改时间">{{ props.info.updateAt || '-' }}</a-form-item>
					</a-col>
					<a-col :span="12">
						<a-form-item label="前跟进人">{{ props.info.followUpBefperson || '-' }}</a-form-item>
					</a-col>
					<a-col :span="12">
						<a-form-item label="跟进状态">{{ followUpMap[props.info.followUpStatus] || '-' }}</a-form-item>
					</a-col>
					<a-col :span="12">
						<a-form-item label="线索类型">{{ props.info.clueType || '-' }}</a-form-item>
					</a-col>
					<slot name="info"></slot>
				</a-row>
			</a-form>
		</template>
		<!-- 联系人展示 -->
		<template v-if="radioValue === '3'">
			<div>
				<s-table ref="table" :columns="columns" :data="loadData" :row-key="(record) => record.id">
					<template #bodyCell="{ column, record }">
						<template v-if="column.dataIndex === 'contactsName'">
							<a
								v-if="
									(props.type === 'CluePrivateSea' && hasPerm('bizCluePurposeDetailViewLinker')) ||
									(props.type === 'ClueHighSea' && hasPerm('bizCluePoolDetailViewLinker'))
								"
								@click="toUserDetail(record)"
								>{{ record.contactsName || '—' }}</a
							>
						</template>
					</template>
				</s-table>
			</div>
		</template>
	</div>
</template>
<script setup>
	import { customerRecordEnum, followTypeEnum, followUpMap } from '@/views/biz/contractManagement/enum/contractEnum'
	import { useRouter } from 'vue-router'

	const router = useRouter()
	const props = defineProps({
		info: {
			type: Object,
			default: () => ({})
		},
		/**
		 * 获取记录列表
		 */
		getRecord: {
			type: Function
		},
		/**
		 * 获取联系人列表
		 */
		getPersonList: {
			type: Function
		},
		/**
		 * 公海还是私海
		 */
		type: {
			type: String
		}
	})
	onBeforeMount(() => {
		getRecords()
	})

	/**
	 * 获取跟进记录
	 */
	const radioValue = ref('2')
	const activeTab = ref(undefined)
	const recordParams = ref({
		current: 1,
		size: 4,
		type: '',
		customerCode: props.info.customerCode
	})
	const getRecords = () => {
		recordParams.value.type = activeTab.value ? activeTab.value : ''
		props.getRecord(recordParams.value).then((res) => {
			recordList.value = res.records
			total.value = res.total
		})
	}

	/**
	 * 下拉加载更多
	 */
	const recordList = ref([])
	const total = ref(0)
	const loadmore = ref()
	const loading = ref(false)
	const timer = ref(null)
	const onBottom = () => {
		if (recordList.value.length >= total.value) {
			return
		}
		const distance = window.innerHeight - loadmore.value.getBoundingClientRect().bottom
		if (distance > 20) {
			loading.value = true
			clearTimeout(timer.value)
			timer.value = setTimeout(() => {
				clearTimeout(timer.value)
				recordParams.value.size += 4
				props
					.getRecord(recordParams.value)
					.then((res) => {
						recordList.value = res.records
					})
					.finally(() => {
						loading.value = false
					})
			}, 500)
		}
	}

	/**
	 * 获取联系人列表
	 */
	const columns = [
		{
			title: '联系人名称',
			dataIndex: 'contactsName',
			width: 150,
			align: 'center'
		},
		{
			title: '手机',
			dataIndex: 'contactsPhone',
			width: 150,
			align: 'center'
		},
		{
			title: '电话',
			dataIndex: 'phone',
			width: 150,
			align: 'center'
		},
		{
			title: '职位',
			dataIndex: 'contactsPost',
			width: 150,
			align: 'center'
		}
	]
	const table = ref()
	const loadData = (parameter) => {
		const params = {
			customerCode: props.info.customerCode,
			...parameter
		}
		return props.getPersonList(params).then((res) => {
			return res
		})
	}
	/**
	 * 联系人详情
	 */
	const toUserDetail = (info) => {
		const queryInfo = { id: info.id }
		queryInfo.customerName = props.info.customerName
		queryInfo.type = props.type
		queryInfo.followUpStatus = props.info.followUpStatus
		router.push({
			path: '/biz/customerManagement/personDetail',
			query: queryInfo
		})
	}
	defineExpose({
		table,
		radioValue,
		getRecords
	})
</script>
<style lang="less" scoped>
	.radio-wrap :deep(.ant-radio-button-wrapper) {
		height: auto;
		padding: 2px 30px;
		font-size: 16px;
		font-weight: 500;
		color: #333;
		& .ant-radio-button-checked + span {
			color: var(--primary-color);
		}
	}

	.tab-wrap {
		margin-bottom: 20px;
		background: #f7f7f7;
		& :deep(.ant-tabs-nav) {
			margin-bottom: 0;
		}
		& :deep(.ant-tabs-tab) {
			padding: 12px 20px;
			&:first-child {
				padding: 12px 36px;
			}
			& .ant-tabs-tab-btn {
				font-size: 16px;
				font-weight: 500;
				color: #333333;
			}
			&.ant-tabs-tab-active .ant-tabs-tab-btn {
				color: var(--primary-color);
			}
		}
	}
	.scoll-view {
		height: calc(100vh - 510px);
		overflow-y: auto;
	}

	.form_label :deep(.ant-form-item-label > label) {
		color: rgb(107 114 128);
	}
	.form_label :deep(.ant-form-item-label > label::after) {
		color: transparent;
	}
</style>
